<template>
  <div>
    <Row class="search-info-style">
      <Col span="6">
      <span style="text-al">申&nbsp;&nbsp;请&nbsp;&nbsp;人：</span>
      <Input style="width: 70%;" v-model="searchInfo.applyname"/>
      </Col>
      <Col span="6">
      <span>身份证号：</span>
      <Input style="width: 70%;" v-model="searchInfo.cardno"/>
      </Col>
      <Col span="6">
      <span>业务编号：</span>
      <Input style="width: 70%;" v-model="searchInfo.order_code"/>
      </Col>
      <Button class="new-btn-sty" @click="refresh()" style="float:right">
        <Icon type="ios-clock-outline"/>
        刷新
      </Button>
      <Button class="new-btn-sty" @click="search()" style="float:right">
        <Icon type="ios-search"/>
        搜索
      </Button>
    </Row>
    <Table border :columns="columns" :data="datalist" :loading="loadData">
      <template slot-scope="{ row, index}" slot="action">
        <template v-if="row.evaluation==='0'">
          <Button type="success" size="small" style="margin-right: 5px" @click="callBack(row)">评价</Button>
        </template>
      </template>
    </Table>
    <Page class="page_style" :total="searchInfo.totalnum" :current="searchInfo.currentPageNo"
          :page-size="searchInfo.currentPageSize" @on-change="changePageNo" show-total show-sizer
          @on-page-size-change="size"/>
    <call-back-modal ref="modal" @ok="searchData"/>
  </div>
</template>
<script>
  import { eventorderlist } from '@/api/eventlist'
  import callBackModal from './modules/callBackModal'

  export default {
    name: 'index',
    components: {
      callBackModal
    },
    data() {
      return {
        searchInfo: {
          applyname: '',
          order_code: '',
          applytime: [],
          totalnum: 0,
          currentPageNo: 1,
          currentPageSize: 10,
          department_name: ''
        },
        datalist: [],
        treelist: [],
        eventListSQ: [],
        eventListSC: [],
        columns: [
          {
            title: '事项名称',
            minWidth: 125,
            key: 'title'
          },
          { title: '业务编号', key: 'code', width: 150 },
          { title: '申请人', key: 'name', width: 75 },
          {
            title: '手机号',
            key: 'mobile',
            width: 110,
            render: (h, params) => {
              var mobile = params.row.mobile
              if (mobile) {
                if (mobile.length === 8 || mobile.length === 7) {
                  mobile = mobile.substring(0, 3) + '****' + mobile.substring(6)
                } else if (mobile.length === 11) {
                  mobile = mobile.substring(0, 3) + '****' + mobile.substring(7)
                }
              }
              return h('div', mobile)
            }
          },
          {
            title: '身份证',
            key: 'cardno',
            align: 'center',
            width: 150,
            render: (h, params) => {
              var cardno = params.row.cardno
              if (cardno) {
                cardno = cardno.substring(0, 6) + '********' + cardno.substring(14)
              }
              return h('div', cardno)
            }
          },
          {
            title: '状态',
            width: 65,
            align: 'center',
            className: 'nopadding',
            render: (h, params) => {
              return h('div', '已办结')
            }
          },
          {
            title: '申请时间', key: 'create_time', width: 150, align: 'center', className: 'nopadding'
          },
          { title: '业务来源', key: 'source_name', align: 'center', width: 85 },
          {
            title: '操作',
            key: 'action',
            align: 'center',
            className: 'nopadding',
            minWidth: 50,
            slot: 'action'
          }
        ],
        loadData: true
      }
    },
    methods: {
      callBack(row) {
        this.$refs.modal.key = new Date().getTime();
        this.$refs.modal.edit(row);
      },
      times(date) {
        if (date === undefined || date === null || date === '') {
          return '0时0分0秒'
        }
        let staytimeGap = date
        if (staytimeGap < 0) {
          return '0时0分0秒'
        }
        let stayHour = Math.floor(staytimeGap / (3600 * 1))
        let leave1 = staytimeGap % (3600 * 1)
        let stayMin = Math.floor(leave1 / (60 * 1))
        let leave2 = leave1 % (60 * 1)
        let staySec = Math.floor(leave2 / 1)
        return stayHour + '时' + stayMin + '分' + staySec + '秒'
      },

      search() {
        this.searchInfo.currentPageNo = 1
        this.searchData()
      },

      refresh() {
        this.searchInfo.applyname = ''
        this.searchInfo.cardno = ''
        this.searchInfo.order_code = ''
        this.searchInfo.currentPageNo = 1
        this.searchInfo.currentPageSize = 10
        this.searchData()
      },
      searchData() {
        let params = {
          name: this.searchInfo.applyname,
          cardno: this.searchInfo.cardno,
          code: this.searchInfo.order_code,
          state: 2,
          evaluation: '0'
        }
        this.init(params)
      },
      // 查询订单列表接口
      init(param) {
        this.loadData = true
        param.pageNo = this.searchInfo.currentPageNo
        param.pageSize = this.searchInfo.currentPageSize
        eventorderlist(param).then(res => {
          if (res.data.data) {
            this.datalist = res.data.data.results
            this.searchInfo.totalnum = res.data.data.totalRecord
            this.loadData = false
          } else {
            this.loadData = false
            this.$Notice.error({ title: '获取事项办理列表失败', desc: res.data.errmsg })
          }
        })
      },
      // 切换页码
      changePageNo(pageNo) {
        this.searchInfo.currentPageNo = pageNo
        this.searchData()
      },
      size(pageSize) {
        this.searchInfo.currentPageSize = pageSize
        this.changePageNo()
      }
    },
    created() {
      this.searchData()
    }
  }
</script>
<style scoped lang="less">
  .card_style {
    height: 100%;
    width: 100%;
    overflow: hidden;

    .ivu-card-body {
      padding: 0px;
    }

  }

  .page_style {
    margin-top: 10px;
    text-align: right;
  }

  .search-info-style {
    margin: 10px;
  }

  /deep/ .nopadding .ivu-table-cell {
    padding: 0px 0px;
  }

  .title {
    text-align: center;
    font-size: 1.5rem;
    padding: 20px;
  }

  .notice-name {
    line-height: 2.5;
    margin-top: 6%;
  }

  .notice-context {
    text-indent: 2em;
    line-height: 2.5;
  }

  .notice-content1 {
    padding: 0 4% 0 12%;
    position: relative;
  }

  .notice-address {
    text-align: right;
    margin-top: 10%;
  }

  .notice-date {
    text-align: right;
  }

  .text-line {
    border-color: #878787;
    border-style: solid;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 1px;
    border-left-width: 0px;
    text-align: center;
  }

  .text-line-date {
    border-color: #878787;
    border-style: solid;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 1px;
    border-left-width: 0px;
    width: 10%;
    text-align: center;
  }

  .text-line-address {
    border-color: #878787;
    border-style: solid;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 1px;
    border-left-width: 0px;
    width: 15%;
    text-align: center;
  }

  .print-btn {
    padding: 15px;
    float: right;
  }

  .code-img2 {
    height: 120px;
    width: 120px;
    top: 70%;
    left: 4%;
    position: absolute;
  }

  .code-img1 {
    height: 60%;
    width: 90%;
    margin-left: 5%;
  }

  .centerimg {
    text-align: center;
  }

  .pre_img_style {
    height: 500px;
    width: auto;
    max-width: 500px;
  }

  .new-btn-sty {
    margin-right: 5px;
    color: #fff;
    background-color: #235CA7;
    border-color: #235CA7;
    font-weight: 500;
  }
</style>
